import React, {useState,useEffect}from 'react'
import "./index.scss"
import {CrownTwoTone,UserOutlined, LockOutlined } from "@ant-design/icons"
import { Form, Input, Button,message} from 'antd';
import {getCaptcha} from "../../http/daizhongApi"
import {useDispatch} from "react-redux"
import {loginAsyncAction} from "../../store/LoaningStore/action"

export default function Login(props) {
    const [avaHight,setAvaHight] = useState(0)
    const [img,setImg] = useState("")
    const [imgKey,setImgKey] = useState("")
    const dispatch = useDispatch()
    useEffect(() => {
        const h = window.innerHeight
        setAvaHight(h)
      }, [])

      
    const onFinish = (values) => {
        console.log('Received values of form: ', values); 
        dispatch(loginAsyncAction({
            username:values.username,
            password:values.password,
            code:values.code,
            key:imgKey
        }))
        .then(res=>{
            if(res.code===200){
                message.success(res.msg)
                props.history.push('/home')
            }else{
                message.error(res.msg)
            }
            
        })
        .catch(err=>{
            message.error(err)
        })
        
    };
    

    useEffect(()=>{
        getCaptcha()
        .then(res=>{
            console.log(res.data.data.captcha);
            setImg(res.data.data.captcha)
            console.log(res.data.data.captchaKey);
            setImgKey(res.data.data.captchaKey)

        })
    },[])
    const refreshCode = ()=>{
        getCaptcha()
        .then(res=>{
            console.log(res.data.data.captcha);
            setImg(res.data.data.captcha)
            console.log(res.data.data.captchaKey);
            setImgKey(res.data.data.captchaKey)

        })
        
    }

    return (
        <div className='login' style={{
            minHeight:avaHight-1
        }}>
            <div className='title'>
                <CrownTwoTone className='logo' />
                <span className='title-content'>小额贷款系统</span>
            </div>
            <div className='box' style={{
                minHeight:avaHight-200-1
            }}>
               <div className='login-box'>
                    <div className='login-title'>
                        <h1>用户登录</h1>
                    </div>
                    <div>
                    <Form
                    id='login-form'
                    name="normal_login"
                    className="login-form"
                    initialValues={{ remember: true }}
                    onFinish={onFinish}
                    >
                    <Form.Item
                        name="username"
                        rules={[{ required: true, message: '请输入账号' }]}
                    >
                        <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="账号" />
                    </Form.Item>
                    <Form.Item
                        name="password"
                        rules={[{ required: true, message: '请输入密码' }]}
                    >
                        <Input
                        prefix={<LockOutlined className="site-form-item-icon" />}
                        type="password"
                        placeholder="密码"
                        />
                    </Form.Item>

                    <Form.Item 
                    name="code" 
                    rules={[{ required: true, message: '请输入验证码'}]}
                    >
                        <div className='yanzhen'>
                            <Input
                             placeholder='图形验证码'
                             >
                            </Input>
                            <img src={img} alt="" className="img" onClick={refreshCode}/> 
                            
                        </div>
                    </Form.Item>

                    <Form.Item>
                        <Button type="primary" htmlType="submit" className="login-form-button">
                        登录
                        </Button>
                    </Form.Item>
                    </Form>
                    </div>
               </div>
            </div>
            <div className='footer'>
                Copyright © 2018 深圳市涛涛金融科技有限公司, All Rights Reserved.
            </div>
        </div>
    )
}


